<template>
  <common-drawer
    :visible="visible"
    :title="drawerTitle"
    :size="800"
    :destroy-on-close="true"
    @update:visible="emit('update:visible', $event)"
    @close="handleClose"
  >
    <div v-if="hasBaseInfo">
      <AssetInfoHeader
        :name="assetData.baseInfo?.project || '--'"
        :number="assetData.baseInfo?.assetCode || '--'"
        :address="assetData.baseInfo?.address || '--'"
        :area="assetData.baseInfo?.count || '--'"
      />
    </div>

    <div>
      <!-- 价格比对内容 -->
      <price-comparison-content
        v-if="type === 'price' && hasPriceData"
        :asset-data="assetData.data?.rentComparisonVos || []"
      />
      <el-empty v-else-if="type === 'price'" description="暂无价格比对数据" />

      <!-- 合同合规内容 -->
      <contract-compliance-content
        v-else-if="type === 'contract' && hasContractData"
        :compliance-data="assetData"
      />
      <el-empty
        v-else-if="type === 'contract'"
        description="暂无合同合规数据"
      />

      <!-- 空置监测内容 -->
      <vacancy-monitor-content v-else-if="type === 'vacancy'" />
      <el-empty v-else-if="type === 'vacancy'" description="暂无空置监测数据" />
    </div>
  </common-drawer>
</template>

<script setup>
import { computed } from "vue";
import CommonDrawer from "@/components/CommonDrawer.vue";
import PriceComparisonContent from "./PriceComparisonContent.vue";
import ContractComplianceContent from "./ContractComplianceContent.vue";
import VacancyMonitorContent from "./VacancyMonitorContent.vue";
import AssetInfoHeader from "./AssetInfoHeader.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  type: {
    type: String,
    required: true,
    validator: (value) => ["price", "contract", "vacancy"].includes(value),
  },
  assetData: {
    type: Object,
    required: true,
    default: () => ({
      baseInfo: {},
      data: {},
    }),
  },
});

const emit = defineEmits(["update:visible"]);

// 检查基础信息是否存在
const hasBaseInfo = computed(() => {
  return (
    props.assetData?.baseInfo &&
    Object.keys(props.assetData.baseInfo).length > 0
  );
});

// 检查价格比对数据是否存在
const hasPriceData = computed(() => {
  return props.assetData?.data?.rentComparisonVos?.length > 0;
});

// 检查合同合规数据是否存在
const hasContractData = computed(() => {
  return props.assetData?.contractData;
});

// 检查空置监测数据是否存在
const hasVacancyData = computed(() => {
  return props.assetData?.data?.vacancyData?.length > 0;
});

// 抽屉标题
const drawerTitle = computed(() => {
  const titles = {
    price: "价格比对智能比对",
    contract: "租凭合同合规审查",
    vacancy: "空置状态联防监测",
  };
  return titles[props.type] || "";
});

// 关闭抽屉
const handleClose = () => {
  emit("update:visible", false);
};
</script>

<style lang="scss">
.el-drawer__header {
  margin-bottom: 0 !important;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.asset-drawer {
  .chart-container {
    margin: 24px 0;
    background: #fff;

    .price-chart {
      width: 100%;
      height: 100%;
    }
  }
}

.asset-info {
  margin-bottom: 24px;

  .asset-title {
    margin-bottom: 12px;

    .name {
      font-size: 16px;
      font-weight: 500;
      color: #111827;
    }

    .code {
      margin-left: 12px;
      font-size: 14px;
      color: #6b7280;
    }
  }

  .asset-meta {
    font-size: 14px;

    .label {
      color: #6b7280;
    }

    .value {
      color: #111827;
    }

    .ml20 {
      margin-left: 20px;
    }
  }
}

.price-analysis {
  margin-bottom: 24px;

  .title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 12px;
  }

  .difference {
    &.up {
      color: #10b981;
    }
    &.down {
      color: #ef4444;
    }
  }
}

.analysis-result {
  :deep(.el-alert) {
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
